<template>
  <a-layout id="components-layout-demo-top-side">
    <a-layout-header class="header">
      <div id="logo" />
      <a-menu
        theme="dark"
        mode="horizontal"
        :default-selected-keys="['2']"
        :style="{ lineHeight: '64px' }"
      >
        <!-- 顶部标题 -->
        <a-menu-item v-for="(v,index) in lists" :key="index" @click="TiaoRouter(v.component)">{{v.name}}</a-menu-item>
        <a-menu-item style="float: right;">
          <a-dropdown-button @click="ursername">
            {{yonghuname}}
            <a-menu slot="overlay" @click="handleMenuClick">
              <a-menu-item key="1" @click="qiehuanyongname"> <a-icon type="loading-3-quarters" />修改密码</a-menu-item>
              <a-menu-item key="3" @click="tuichuyongname"> <a-icon type="poweroff" />退出</a-menu-item>
            </a-menu>
            <a-icon slot="icon" type="user" />
          </a-dropdown-button>
        </a-menu-item>
      </a-menu>
    </a-layout-header>
    <!-- style="padding: 0 50px" --> 
    <!-- 四周加边框 -->
    <a-layout-content>
      <!-- style="margin: 16px 0" --> 
      <!-- 面包屑 -->
      <a-breadcrumb style="margin: 16px 50px" separator="|">
        <el-breadcrumb>
          <!-- 面包屑 -->
          <el-breadcrumb-item v-for="(v, i) in path" :key="i">
            <span :class="v.class" @click="topaht(v.path)">{{ v.name }}</span>
            <i style="padding-left: 4px;" class="el-icon-circle-close" @click="san(i)"></i>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </a-breadcrumb>
      <a-layout style="padding: 24px 0; background: #fff">
        <!-- 左侧导航栏 -->
        <a-layout-sider width="200" style="background: #fff">
        <a-menu
        style="height: 100%"
          :default-selected-keys="['1']"
          :default-open-keys="['sub1']"
          mode="inline"
          inline-collapsed
        >
        <a-menu-item @click="shouyepath" key="10086">
          <a-icon type="desktop" />
          <span>首页</span>
        </a-menu-item>
        <a-sub-menu v-for="(v,index) in lists" :key="index">
          <span slot="title" >
            <a-icon type="pie-chart" />
            <span>{{v.name}}</span>
          </span>
          <a-menu-item v-for="(j,indexs) in v.list" :key="indexs+j.component+j.parentId"  @click="zuoTiaoZhuan(j)">
            {{j.name}}
          </a-menu-item>
        </a-sub-menu>
    </a-menu>
        </a-layout-sider>
      <a-layout-content :style="{ padding: '0 24px', minHeight: '750px' ,}">
          <!-- 内容 -->
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout-content>
    <a-layout-footer style="text-align: center">@考试管理系统 备案号:134654-654651-465213-45</a-layout-footer>
  </a-layout>
</template>

<script>
import login from '../api/login'
export default {
  data() {
    return {
      // 当前用户
      yonghuname:'未登录',
      indexs:{},
      // 面包屑
      path: [
        {
          path: "/title",
          name: "首页",
          class: "weight span_a"
        }
      ],
      // 菜单
      lists:[]
    };
  },
  methods: {
    //   顶部导航栏跳转
    TiaoRouter(data) {
      console.log(data);
      this.$router.push(data);
    },
    // 修改密码点击回调
    handleMenuClick(e) {
      console.log('click', e);
    },
    // 删除
    san(val){
      if(val === 0){
        alert("首页请勿删除")
      }else{
        // console.log(val)
        this.path.splice(val,1)        
      }
    },
    // 用户详情
    ursername(){
        if(this.$route.path != '/management'){
          this.$router.push('/management?name=用户资料');
        }
    },
    collapsed(){
      console.log(1)
    },
    type(data){
      if(data == '用户资料'){
        console.log(this.$route.path)
        if(this.$route.path != '/management'){
          this.$router.push('/management?name=用户资料')
        }
      }else if(data == '科目管理'){
        if(this.$route.path != '/qtype'){
          this.$router.push('/qtype?name=科目管理')
        }
      }
    },
    // 退出用户登录状态
    tuichuyongname(){
      this.$router.push('/Login');
      localStorage.clear();
    },
    // 修改当前用户密码
    qiehuanyongname(){
      this.$router.push('/management?name=用户资料&user=1');
    },
    zuoTiaoZhuan(data) {
      console.log(data);
      this.$router.push(`${data.component}?name=${data.name}`);
    },
    topaht(data) {
      if (this.$route.path != data) {
        this.$router.push(data);
      }
    },
    getPath() {
      if(this.$route.query.name == undefined){
        return;
      }
      const path = this.$route.path;
      for (let q = 0; q < this.path.length; q++) {
        if (this.path[q].path == path) {
          this.path[q].class = "weight span_a";
        } else {
          this.path[q].class = "span_a";
        }
      }
      for (let i = 0; i < this.path.length; i++) {
        if (this.path[i].path == path) {
          return;
        }
      }
      this.path.push({
        path: this.$route.path,
        name: this.$route.query.name,
        class: "weight span_a"
      });
    },
    //  查询当前用户
    getlonin(){
      login.danglogin().then(res=>{
          console.log(res.data.user)
          this.yonghuname = res.data.user.alias
          this.getloninPath(res.data.user.userId)
          // this.getpathmenu(res.data.user.userId)
      })
    },
    // 查询当前用户路由
    getloninPath(index){
      login.getloninPath(index).then(res=>{
        if(res.data.code === 20000){
          this.lists = res.data.list
          console.log(this.lists)
        }
      })
    },
    // 单个路由查询
    // getpathmenu(index){
    //   login.getpathmenu(index).then(res=>{
    //       console.log(res.data)
    //   })
    // }
    shouyepath(){
      this.$router.push('/');
    }
  },
  created(){
    //this.yonghuname = localStorage.getItem('token')
    this.getlonin()
  },
  mounted() {
    this.getPath();
  },
  watch: {
    $route: "getPath",
  }
};
</script>

<style scoped>
#components-layout-demo-top-side .logo {
  width: 120px;
  height: 31px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px 28px 16px 0;
  float: left;
}
.span_a {
  font-size: 14px;
  cursor: pointer;
}
/* .span_a:hover {
  font-size: 17px;
} */
.weight {
  font-weight: bolder;
}
#logo {
  width: 160px;
  height: 31px;
  background: url(./001.jpg) no-repeat 50%;
  margin: 16px 28px 16px 0;
  float: left;
}
.ant-menu.ant-menu-dark .ant-menu-item-selected,
.ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected{
  background-color: #1890ff00;
}
</style>
